<template>
  <section class="chart-container">
    <div class="c_header systemManage">
      <div class="content">
        <div class="main-content">
          <div>
            <div class="cont">
              <div class="btn-group">
                <el-button type="primary" @click="addNewRole">添加新角色</el-button>
              </div>
              <table width="95%" style="background:#fff">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>名字</th>
                    <th>权限数</th>
                    <th>员工数</th>
                    <th width="320px">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in roleList" :key="item.id">
                    <td>{{index+1}}</td>
                    <td>{{item.hash.rname}}</td>
                    <td>{{item.hash.countf}}</td>
                    <td>{{item.hash.countp}}</td>
                    <td>
                      <span @click="modifyRoleInfoClick(item.hash.rid)">角色修改</span>
                      <span @click.stop="deleteRoleItem(item.hash.rid)">删除</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-dialog title="角色管理" :visible.sync="dialogTableVisible5" width="85%">
              <div class="addInfo">
                <div class="title">新增角色</div>
                <table width="95%">
                  <tbody>
                    <tr>
                      <td width="20%"><b style="color:#f56c6c;margin-right:4px">*</b>角色名称:</td>
                      <td><input type="text" v-model="newRoleName"></td>
                    </tr>
                    <tr>
                      <td :rowspan="rolePermissionList.length+2"><b style="color:#f56c6c;margin-right:4px">*</b>权限管理:</td>
                      <zTree v-if="isRouterAlive" :list.sync="ztreeDataSource" :func="nodeClick" :isOpen="true"
                        :isCheck="true"
                      ></zTree>
                    <tr>
                    <tr>
                      <td colspan="2" v-show="showAddRoleBtn" @click="addRole"><span>提交</span></td>

                    </tr>
                  </tbody>
                </table>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import zTree from '~/components/common/zTree.vue';

export default {
  data() {
    return {
      dialogTableVisible5: false,
      dialogTableVisible6: false,
      sideMenu: [],
      isRouterAlive: true,
      RoleRids: [],
      change: '用户列表',
      showTitle: '',
      ts: this.newStore(),

      // 角色管理相关
      roleList: [], // 角色列表
      rolePermissionList: [], // 角色权限列表
      permissionList: [], // 添加权限时绑定选择的权限数组
      onePermissInfo: [], // 一条角色信息
      showRoles: true, // 展示角色列表页
      showAddNewRole: false, // 展示增加角色页
      newRoleName: '', // 新角色名称
      nowRoleRid: '', // 点击角色权限修改时保存当前的rid
      showAddRoleBtn: false, // 添加角色时显示提交按钮
      showModifyRoleBtn: false, // 修改角色

      ztreeDataSource: [],
      dataList: [],
      treeDeepCopy: [],
      parentNodeModel: [], // 当前点击节点父亲对象
      nodeModel: null, // 当前点击节点对象
      ts: this.newStore(),
      result: [],
      Promiseall: [],
    };
  },
  created() {
    this.getSidemenu();
    this.getRoleList();
  },

  methods: {
    getTreea(rid) {
      return new Promise((resolve, reject) => {
        const req = {
          handle: '67A5B6FEF17D97DECF116BDF95B95C0B639EC0CBABE57827',
          token: localStorage.getItem('token'),
          rid,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.data = ts.d.data.operation1[0].hash.privstr;
          resolve(this.data);
        });
      });
    },
    nodeClick(trees) {
      this.dataList = [];
      this.getResult(trees);
    },
    getResult(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].ckbool) {
          this.dataList.push(data[i].id);
        }
        if (data[i].hasOwnProperty('children')) {
          this.getResult(data[i].children);
        }
      }
    },
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: '200300',
      };
      // this.spost(this.ts, '/mainservlet', req).then((ts) => {
      // this.sideMenu = ts.d.data.operation1;
      // });
    },
    reloadTree() {
      this.isRouterAlive = false;

      this.getTreea(this.nowRoleRid).then((t) => {
        this.ztreeDataSource = JSON.parse(t);
        // console.log(JSON.stringify(t));
        this.$nextTick(() => {
          this.isRouterAlive = true;
        });
      });
    },

    // 角色管理
    // 点击添加角色按钮
    addNewRole() {
      this.reloadTree();
      this.newRoleName=''
      this.nowRoleRid = '';
      this.showAddRoleBtn = true;
      this.dialogTableVisible5 = true;
    },

    // 添加角色接口方法
    addRole() {
      if (this.newRoleName.length < 1) {
        alert('请输入角色名称！');
        return;
      }
      let res;
      if (this.nowRoleRid) {
        res = {
          handle: '67A5B6FEF17D97DE35647731BB93A79BC65B80675326A1A5',
          token: localStorage.getItem('token'),
          rid: this.nowRoleRid,
          rname: this.newRoleName,
          funcsubid: this.dataList,
        };
      } else {
        res = {
          handle: '67A5B6FEF17D97DEC3C602ED709680FD3B0374EB2CB78F0B',
          token: localStorage.getItem('token'),
          rname: this.newRoleName,
          funcsubid: this.dataList,
        };
      }

      this.spost(this.ts, '/mainservlet', res).then(() => {
        // alert('保存成功！');
        this.dialogTableVisible5 = false;
        this.getRoleList();
      });
    },
    // 点击修改角色按钮
    modifyRoleInfoClick(rid) {
      const req = {
        handle: '67A5B6FEF17D97DE35647731BB93A79B8998619FA4F7E6A9',
        token: localStorage.getItem('token'),
        rid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.onePermissInfo = ts.d.data.operation1;

        this.newRoleName = this.onePermissInfo[0].hash.rname;
      });
      this.nowRoleRid = rid;

      this.reloadTree();
      this.showAddRoleBtn = true;
      this.dialogTableVisible5 = true;
    },


    // 删除角色
    deleteRoleItem(rid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B63594DB988E5D37DF1',
          token: localStorage.getItem('token'),
          rid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'primary',
            message: '删除成功!',
          });
          this.getRoleList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 获取用户角色列表
    getRoleList() {
      const req = {
        handle: '67A5B6FEF17D97DE35647731BB93A79B410BC76858D429A5',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.roleList = ts.d.data.operation1;
      });
    },


  },
  components: {
    zTree,
  },

};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  table >>> .el-button--text
    color: #00f
    padding: 0 5px 0 0
    border-radius: 0
    border-right: 1px solid #999
  table >>> .el-message--success
    color: #00f
  // table >>> .el-button--text
  //   border-right: none;
  .show-role >>> .el-button
    padding: 5px 15px
  .show-role >>> .el-button--primary
    background: #69f
    border-color: #69f
  .systemManage
    width: 100%
    .content
      display: flex
      width: 100%
      min-height: 600px
      .sidebar
        flex: 0 0 200px
        width: 200px
        background: #F2F2F2
        border-right: 1px solid #ccc
        .main-title
          flex: 1
          width: 100%
          height: 44px
          line-height: 44px
          border-bottom: 2px solid #fff
          color: #13227A
          font-size: 0
          .iconfont
            display: inline-block
            margin-right: 15px
            font-size: 20px
            text-indent: 1em
          .text
            display: inline-block
            font-weight: 600
        .menu
          display: block
          width: 100%
          text-indent: 2em
          cursor: pointer
          background: #ffffff
          .title
            height: 48px
            line-height: 48px
            border-bottom: 1px solid #ccc
            padding-left: 10px
            &.choosed
              background #ccc
              color #333
      .main-content
        flex: 1
        min-height: 780px;
        .search_h
          height: 44px
          line-height: 44px
          padding-left: 20px
          background: #f2f2f2
          border-bottom: 2px solid #fff
          p
            float: left
            font-size: 16px
            a
              color: #69f
            span
              font-size: 14px
              padding-left: 15px
        .search_c
          width: 100%
          padding: 20px
          border-bottom: 1px solid #f1f1f1;
          .billlist
            margin-bottom: 30px
            span
              display: inline-block
              font-size: 14px
              width: 30%
              min-width: 100px
              &:first-child
                padding-left: 20px
              .selectC
                box-sizing: content-box
                width: 190px
                padding: 8px 5px
                border-radius: 2px
                box-shadow: 0 0 5px #ccc
                font-size: 14px
                color: #333
              input
                box-sizing: content-box
                width: 190px
                padding: 7px 5px
                margin-left: 5px
                border-radius: 2px
                border: 1px solid #ccc
                color: #333
          .search
            margin: 0 auto
            width: 80px
            height: 30px
            line-height: 30px
            text-align: center
            font-size: 14px
            background-color: #69f
            color: #fff
            border-radius: 5px
            font-weight: 400
            cursor: pointer
        .cont
          padding-left: 30px
          .btn-group
            margin: 10px 0
            .btn
              display: inline-block
              padding: 10px
              margin-right: 15px
              text-align: center
              font-size: 14px
              background-color: #69f
              color: #fff
              font-weight: 400
              cursor: pointer
            .text
               select
                    min-width: 100px
                    height: 30px
                    border: 1px solid #ccc
          table
            text-align: center
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            td, th
              border: 1px solid #ccc
              font-size: 14px
              color: #666
              height: 40px
            thead
              th
                font-weight: 600
                background-color: #F2F2F2
            tbody
              td
                span
                  display: inline-block
                  vertical-align: middle
                  margin: 0 5px
                  padding-right: 5px
                  border-right: 1px solid #999
                  color: blue
                  &:last-child
                    border-right: none
          .pagination-wrapper
            height: 60px
            line-height: 60px
            text-align: center
            .desc
              margin-left: 50px
              display: inline-block
              font-size: 14px
              span
                color: #666
                i
                  padding: 0 3px
                  font-size: 16px
                  color: #25a4bb
        .addInfo
          padding: 0 30px
          .title
            padding: 15px 0
            font-size: 16px
            span
              color: #69f
              cursor: pointer
          table
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            tbody
              tr
                td
                  border: 1px solid #ccc
                  font-size: 14px
                  color: #666
                  height: 40px
                  padding: 0 15px
                  &:nth-of-type(odd)
                    text-align: right
                  input:not([type="radio"]):not([type="checkbox"])
                    width: 300px
                    height: 30px
                    border: 1px solid #ccc
                  select
                    width: 200px
                    height: 30px
                    border: 1px solid #ccc
                  label
                    display: inline-block
                    padding: 0 15px 0 5px
                  checkbox
                    display: inline-block
                    vertical-align: top
                &:last-child
                  td
                    text-align: center
                    span
                      padding: 5px 15px
                      font-size: 14px
                      background-color: #69f
                      color: #fff
                      border-radius: 5px
                      font-weight: 400
                      cursor: pointer
        .show-role
          padding: 0 30px
          .title
            padding: 15px 0
            font-size: 16px
            span
              color: #69f
              cursor: pointer
          .list
            margin-bottom: 15px
            span
              margin-right: 15px
</style>
